// Modal and popup colours.

.popup {
    background-color: var(--popup-dark-color);
    box-shadow: 0px 0px 42px -10px rgba(0,0,0,0.75);
    border-color: var(--popup-dark-shade);
    color:var(--popup-dark-text);

    & clr-icon svg path {
        stroke: var(--popup-dark-text);
        fill: var(--popup-dark-text);
    }

    button {
        background-color: var(--popup-dark-color);
        color: var(--popup-dark-text);
    }

    form input[type="submit"]:hover, form button:hover {
      background-color: lighten(@popup-dark-color, 10%);
    }

    .btn-share {
        &.odt, &.plain, &.tex {
            color: var(--popup-dark-text);
            &:hover {
                color: black;
            }
        }
    }

    a.toc-link {
        color: var(--popup-dark-text);
        &:hover { background-color: lighten(@popup-dark-color, 20%); }
    }

    // Icon selector buttons
    .icon-block:hover { background-color: var(--grey-7); }

    .formatting a:hover { background-color:var(--grey-7); }

    .search {
      button {
        background-color: var(--popup-dark-color);
        &:hover { background-color: lighten(@popup-dark-color, 20%); }
      }

      input[type="text"]::placeholder { color: var(--grey-1); }

      input#searchWhat {
        border-bottom-color: var(--popup-dark-shade);
        border-right-color: var(--popup-dark-shade);
      }

      input#replaceWhat {
        border-right-color: var(--popup-dark-shade);
      }
    }

    // The table generator
    .table-generator {
      .row .cell.active {
        background-color: var(--grey-3);
        border-color: var(--grey-3);
      }
    }
}

.popup-arrow {
    &.up    { border-bottom-color: var(--popup-dark-shade); }
    &.down  { border-top-color:    var(--popup-dark-shade); }
    &.left  { border-right-color:  var(--popup-dark-shade); }
    &.right { border-left-color:   var(--popup-dark-shade); }
}
